<template>
	<div>
		<!-- <so-header :seller="headerTitle"></so-header> -->
    <setHeader :title="headerTitle"></setHeader>
    <div class="pagecontent">
        <h3 class="mt-notice">欢迎您成为圈主</h3>
        <div class="write_input_box write-label">
            <label for="">圈子名称：</label>
            <input type="text" placeholder="请输入圈子名称" v-model="circlename" @mousedown="showPicker">
        </div>
        <div class="write_input_box write-label autocomplete" v-show="showss" style="postion:relative;">
            <label for="">主体单位：</label>
            <input type="text" placeholder="请输入你管理主体的名称" v-model="MainNmae" @mousedown="showPicker">
            <!-- <span><i class="iconfont icon-shixinxiajiantou"></i></span> -->
        </div>
        <div class="write_input_box write-label autocomplete" v-show="showsss" style="postion:relative;">
            <label for="">主体单位：</label>
            <input type="text" placeholder="请输入你管理主体的名称" v-model="MainNmaes" @click.capture="showCompanyList" @mousedown="showPicker">
            <span><i class="iconfont icon-shixinxiajiantou"></i></span>
        </div>
        <div class="write_input_box write-label" style="border-bottom: none;">
            <label for="" style="width: 1.8rem !important;">管理员姓名：</label>
            <input type="text" placeholder="请输入管理员的姓名" v-model="userInfo.username">
        </div>
        <div class="write_input_box write-label autocomplete" style=" margin-top:0.2rem;postion:relative;" @click="selectIndustry">
            <label for="">所属行业：</label>
            <span v-if="hy_name">
              {{hy_name}}
            </span>
            <span v-else style="font-size: 0.26rem; color: #ededed;line-height:0.3rem;">
              请选择所属行业
            </span>
            <!-- <input type="text" placeholder="请选择所属行业" v-model="hy_name" @mousedown="showPicker" @click="selectIndustry">  -->
            <span><i class="iconfont icon-shixinxiajiantou"></i></span>
        </div>
        <!-- <div class="write_input_box write-label" style=" margin-top:0.2rem">
            <label for="">所属行业：</label>
            <input type="text" placeholder="请选择所属行业" v-model="hy_name" @mousedown="showPicker" @click.capture="selectIndustry"> 
        </div> -->
        <!-- <div class="write_input_box write-label" style="border-bottom: none;">
            <label for="">所在地区：</label>
            <input type="text" placeholder="请选择所在地区" v-model="ad_name" @mousedown="showPicker" @click.capture="selectAddress">
        </div> -->
        <div class="write_input_box write-label autocomplete" style="border-bottom: none;postion:relative;" @click="selectAddress">
            <label for="">所属地区：</label>
            <span v-if="ad_name">
              {{ad_name}}
            </span>
            <span v-else style="font-size: 0.26rem; color: #ededed;line-height:0.3rem;">
              请选择所属行业
            </span>
            <!-- <input type="text" placeholder="请选择所在地区" v-model="ad_name" @mousedown="showPicker" @click="selectAddress"> -->
            <span><i class="iconfont icon-shixinxiajiantou"></i></span>
        </div>
        <div class="btn_big_red" @click="Create" style="margin-top: 0.9rem;">
            <button>创建圈子</button>
        </div>
    </div>
    <!-- 地区 -->
    <AreaLinkage v-show="linkShow" @textname="showLinkage"  @textnameId="showLinkageId" @done="closeAdd"></AreaLinkage>
    <!-- 行业 -->
    <IndustryLinkage v-show="industryShow" @categoryname="showIndustry" @categoryId="showIndustryId" @done="closeAdd" :industryshow="true"></IndustryLinkage>
    <!-- <h3 class="mt-notice">欢迎您成为圈主</h3>
		<mt-field label="圈子名称：" placeholder="请输入圈子名称"  v-model="circlename" @mousedown.native="showPicker"></mt-field>
    <mt-field label="管理主体：" placeholder="请输入圈子名称"  v-model="MainNmae" v-show="showss" @mousedown.native="showPicker" ></mt-field>
    <mt-field label="管理主体：" placeholder="请选择企业"  v-model="MainNmaes" v-show="showsss" @click.native.capture="showCompanyList" @mousedown.native="showPicker"></mt-field>
    <mt-field label="管理员名称：" placeholder="请输入圈子名称"  v-model="userInfo.username"></mt-field>
		<mt-button type="default" class="el-long-button el-long-create-button"  @click="Create">申请创建</mt-button> -->

    <mt-popup
        v-model="popupVisible"
        position="bottom">
      <ul> 
        <li v-for="list in UcompanyList" @click="JoinCirlce(list.name,list.id)" :key="list.id">{{list.name}}</li>
      </ul>
    </mt-popup>

    <mt-popup
        v-model="popupVisibleIndustry"
        position="bottom">
      <ul> 
        <li v-for="list in IndustryList" @click="selectpIndustry(list.HY_KEY,list.id,list.HY_MC)" :key="list.id">{{list.HY_MC}}</li>
      </ul>
    </mt-popup>
		<!-- <mt-popup
        v-model="popupVisibleAdress"
        position="bottom">
      <ul> 
        <li v-for="list in AdressList"  @click="selectpAdress(list.city_id,list.id,list.city_name)" :key="list.id">{{list.city_name}}</li>
      </ul>
    </mt-popup> -->
	</div>
</template>
<script>
import setHeader from '../public/setHeader.vue';
import { MessageBox } from 'mint-ui';
import {createGroup,friendList} from '../api/api';
import AreaLinkage from '@/components/area_linkage';
import IndustryLinkage from '@/components/industry_linkage';


export default {
	data() {
      return {
        headerTitle:'创建圈子',
        linkShow: false,
        industryShow: false,
        circlename: '',
        userInfo:'',
        showss:'',
        MainNmae:'',
        showsss:'',
        MainNmaes:'',
        UcompanyList:[],
        popupVisible:false,
        popupVisibleIndustry:false,
        popupVisibleAdress:false,
        company_id: '',
        groupIdList:[],
        IndustryList:'',
				industryId:'',
				hy_name:'',
				AdressList:'',
        ad_name:'',
        c_hyId:'',
        c_adId:'',
         
      };
    },
    components: {
      setHeader,
      AreaLinkage,
      IndustryLinkage
    },
    created() {
      let that = this;
      that.userInfo = window.localStorage.getItem('userInfo');
      that.userInfo = JSON.parse(that.userInfo);
      that.getCompanyInfo();
      //初始化 获取一级行业
			// that.getIndustryList(0,'','');
			//初始化 获取一级地区
			// that.getAdressList('province');
    },
    mounted() {
      // let that = this;
      // var user = Promise.resolve(this.getUserInfo())
      // user.then(
      //   function (result) { 
      //   console.log(result);
      //   that.userInfo = result;
      //   that.getCompanyInfo();
      // })
      this.circlename = this.$route.query.circlename;
    },
    methods:{
      /******行业**************/
			//获取行业列表
			// getIndustryList(pkey,id,hy_name){
			// 	// let pkey = 0;
			// 		this.$fetch(this.$path + '/api.php/circle/getIndustryList',{pkey}).then((response) => {
			// 			console.log('行业列表', response); 
			// 			if(response){
			// 				if(response.code == 200) {
			// 						this.IndustryList = response.data;
			// 				}else{
			// 					console.log('数据错误');
			// 				}
			// 			}else{
			// 				console.log(id);
			// 				this.industryId = id;
			// 				this.hy_name = hy_name;
			// 				this.popupVisibleIndustry = false;

			// 			}
						
      //     })
			// },
			//点击选择父级行业
			// selectpIndustry(val,id,name){
			// 		this.getIndustryList(val,id,name);
			// },
			//点击选择行业
      selectIndustry:function(){
				//console.log(9898);
				// this.getIndustryList(0,'','');
				// this.popupVisibleIndustry = true;
				this.industryShow = !this.industryShow;
      },
      showIndustry(data) {
        this.hy_name = data;
        this.industryShow = false;
      },
      showIndustryId(data) {
        this.c_hyId = data;
        console.log('行业Id',this.c_hyId);
        this.industryShow = false;
      },
			

		/**************地区********/
		//获取地区列表
		
			// getAdressList(pkey,id,ad_name){
				// let pkey = '';
				// if(num == 1){
				// 	pkey = 'province_id';
				// }else if(num == 2){
				// 	pkey = 'city_id';
				// }else if(num == 3){
				// 	pkey = 'county_id';
				// }else if(num == 4){
				// 	pkey = 'town_id';
				// }else{
					
				// }
			// 	console.log(pkey);
			// 		this.$fetch(this.$path + '/api.php/circle/getAdressList',{pkey}).then((response) => {
			// 			console.log('地区列表', response); 
			// 			if(response){
			// 				if(response.code == 200) {
			// 					  // this.addre_ji = num + 1;
			// 						this.AdressList = response.data;
			// 				}else{
			// 					console.log('数据错误');
			// 				}
			// 			}else{
			// 				console.log(id);
			// 				// this.industryId = id;
			// 				this.ad_name = ad_name;
			// 				this.popupVisibleAdress = false;

			// 			}
						
      //     })
			// },
			//点击选择父级地区
			// selectpAdress(val,id,name){
			// 		this.getAdressList(val,id,name);
      // },
      
			//点击选择地区
      selectAddress:function(){
				//console.log(9898);
				// this.getAdressList(0,'','');
        // this.popupVisibleAdress = true;
        this.linkShow = !this.linkShow;
				
      },
      // 关闭选择地区
      closeAdd() {
        this.linkShow = false;
        this.industryShow = false;
      },
      // 选择好地区后绑定值在input框
      showLinkage(data) {
        this.ad_name = data;
        console.log('地区',this.ad_name);
        this.linkShow = false;
      },
      showLinkageId(data) {
        this.c_adId = data;
        console.log('地区Id',this.c_adId);
        this.linkShow = false;
      },
    	showPicker(e){
        e.preventDefault(); //阻止输入法的唤醒
			},
      //获取用户拥有的企业
      getCompanyInfo:function(){
        let that = this;
        let uid = that.userInfo.uid;
        console.log(uid);
          this.$post(
                that.$path+'/api.php/company/getAuthCompanyList',{userId:uid,type:0})
                .then((res) => {
                 let count = res.data.length;
                 if(count == 1){
                    that.showss = true;
                    that.MainNmae= res.data[0].name;
                    that.company_id = res.data[0].id;
                 }else{
                    that.MainNmaes= '请点击选择企业';
                    that.showss = false;
                    that.showsss = true;
                    that.UcompanyList = res.data;
                 }
                  console.log(res);
                  
          })
      },
      //点击选择企业
      showCompanyList:function(){
        //console.log(9898);
        this.popupVisible = true;
      },
      JoinCirlce:function(name,id){
          this.MainNmae = name;
          this.MainNmaes= name;
          this.company_id = id;
          this.popupVisible = false;
      },
      // showPicker(e){
      //   e.preventDefault(); //阻止输入法的唤醒
      // },
      //创建圈子
      Create:function(){
        let that = this;
        let c_body = that.company_id;
        let c_name = that.circlename;
        let c_user = that.userInfo.username;
        let c_hy_name = that.hy_name;
        let c_ad_name = that.ad_name;
        let c_hyId = that.c_hyId;
        let c_adId = that.c_adId;
        if(c_body == ''){
          MessageBox('温馨提示', '请选择您的企业');
          return false;
        }
        if(c_hy_name == ''){
          MessageBox('温馨提示', '请选择您的行业');
          return false;
        }
        if(c_ad_name == ''){
          MessageBox('温馨提示', '请选择您所在地区');
          return false;
        }
        //判读是否已经提交创建
        that.$post(that.$path+'/api.php/Circle/checkCircleName',{c_name:c_name}).then((res) => {
            console.log(res);
            if(res.code == 200){
              MessageBox.alert('此圈子名称已被创建 请换一个名称').then(action => {
              that.$router.push({path: '/crcircle'}); 
            });
            }else if(res.code == 202){
              //新创建圈子
              that.$post(
              that.$path+'/api.php/Circle/createCircle',{c_name:c_name,c_user:c_user,c_cp_id:c_body,uid:that.userInfo.uid,c_hy_name:c_hy_name,c_ad_name:c_ad_name,c_hyId:c_hyId,c_adId:c_adId}).then((res) => {
                console.log('圈子666',res);
                
                  if(res.code == 200){
                    that.$openDialog({
                      src: require('../common/images/UI-11.png'),
                      title: '提交完成',
                      message: '请等待审核通过',
                      okText: '完成',
                      callback (flag) {
                        if(flag) {
                          that.$router.push({path: '/userCenter', query: {paicheNo: res.data}});
                        } 
                      }
                    });
              //       let cid = res.data;
              //       //创建圈子成功  创建一个圈聊
              //       that.$store.commit('setPage', 2);//设置需要预请求的参数
              //       //返回群聊id和0
              //       createGroup({name: c_name,gId:0,tId:0}).then(ress => {
              //         console.log('995',ress);
              //         if (parseInt(ress.status) !== 0) {
              //           //绑定圈子相应的群聊id
              //           that.$store.commit('setPage', 1);//设置需要预请求的参数
              //             that.$post(
              // that.$path+'/api.php/Circle/updateCircleIM',{cid:cid,c_ImId:ress.status}).then((resc) => {
              //               console.log('cim',resc);
              //               if(resc.code == 200){
              //                   that.$openDialog({
              //                     src: require('../common/images/wave.png'),
              //                     title: '提交完成',
              //                     message: '请等待审核通过',
              //                     okText: '完成',
              //                     callback (flag) {
              //                       if(flag) {
              //                         that.$router.push({path: '/userCenter', query: {paicheNo: res.data}});
              //                       } 
              //                     }
              //                   });
              //               }
              //           })
              //           //this.$emit('update:visible', false)
              //           that.groupIdList = []
                        
              //         }
              //       })
                    
                      // MessageBox.alert('创建成功,等待审核').then(action => {
                      // 	that.$router.push({path: '/userCenter', query: {paicheNo: res.data}}); 
                      // });  
                  }else{
                      // MessageBox.alert(res.msg).then(action => {
                      //   that.$router.replace({path: '/userCenter'}); 
                      // });
                      MessageBox.alert(res.msg);
                  }       
              })
            }
        })
          
      }
    }
}

</script>

<style >
.autocomplete .icon-shixinxiajiantou {
    line-height: 1rem;
    position: absolute;
    right: 0;
    /* margin-top: -1rem; */
    height: 1rem;
    padding: 0 0.2rem;
    color: #999;
    font-size: 0.28rem;
}
/* 圈子标题 */
 .mt-notice{
   /* height: 1.1rem ; */
   line-height: 1.1rem ;
   font-size: 0.36rem ;
   padding: 0 0.2rem ;
   font-weight: 500;
   font-family:SourceHanSansCN-Medium;
 }
/* 创建圈子 */
.write-label label{
  width: 1.8rem;
}
.write-label input {
  width: 72%;
}


</style>